import React, { Component } from 'react'
import { Layout, Menu, Icon, Dropdown, Avatar, Badge } from 'antd'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { getNotificationList } from '../../actions/notifications'
import { logout } from '../../actions/user'

import './frame.less'
import logo from '../../assets/login.jpg'
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout

const mapState = state => {
    return {
        notificationsCount: state.notifications.list.filter(item => item.hasRead === false).length,
        avatar: state.user.avatar,
        displayName: state.user.displayName
    }
}
@connect(mapState, { getNotificationList, logout })
@withRouter
class Frame extends Component {
    constructor(props) {
        super()
        this.state = {
            path: '/admin/dashboard',
        }
    }
    componentDidMount() {
        this.props.getNotificationList()
        this.setState({
            path: this.props.history.location.pathname,
        })
    }
    onMenuClick = ({ key }) => {
        this.props.history.push(key)
    }

    onDropdownMenuClick = ({ key }) => {
        if (key === '/logout') {
            this.props.logout()
        } else {
            this.props.history.push(key)
        }
    }

    renderDropdown = () => (
        <Menu onClick={this.onDropdownMenuClick}>
            <Menu.Item
                key="/admin/notifications"
            >
                <Badge dot={Boolean(this.props.notificationsCount)}>
                    通知中心
        </Badge>
            </Menu.Item>
            <Menu.Item
                key="/admin/profile"
            >
                个人设置
      </Menu.Item>
            <Menu.Item
                key="/logout"
            >
                退出登录
      </Menu.Item>
        </Menu>
    )

    render() {
        console.log(this.state.path)
        return (
            <Layout style={{ minHeight: '100%' }}>
                <Header className="header my-header">
                    <div className="my-logo">
                        <img src={logo} alt="学旅家" />
                    </div>
                    <div>
                        <Dropdown overlay={this.renderDropdown()}>
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                <Avatar src={this.props.avatar} />
                                <span>欢迎您！{this.props.displayName}</span>
                                <Badge count={this.props.notificationsCount} offset={[-10, -10]}>
                                    <Icon type="down" />
                                </Badge>
                            </div>
                        </Dropdown>
                    </div>
                </Header>
                <Layout>
                    <Sider width={200} style={{ background: '#fff' }}>
                        <Menu
                            mode="inline"
                            defaultSelectedKeys={[this.state.path]}
                            defaultOpenKeys={['infomation']}
                            style={{ height: '100%', borderRight: 0 }}
                        >
                            <SubMenu key="infomation" title="综合信息" onClick={this.onMenuClick}>
                                {
                                    this.props.menus.map(item => {
                                        return (
                                            <Menu.Item key={item.pathname}>
                                                <Icon type={item.icon} />
                                                {item.title}
                                            </Menu.Item>
                                        )
                                    })
                                }
                            </SubMenu>
                            <SubMenu key="sub2" title="subnav 2">
                                <Menu.Item key="5">option5</Menu.Item>
                                <Menu.Item key="6">option6</Menu.Item>
                                <Menu.Item key="7">option7</Menu.Item>
                                <Menu.Item key="8">option8</Menu.Item>
                            </SubMenu>
                            <SubMenu key="sub3" title="subnav 3">
                                <Menu.Item key="9">option9</Menu.Item>
                                <Menu.Item key="10">option10</Menu.Item>
                                <Menu.Item key="11">option11</Menu.Item>
                                <Menu.Item key="12">option12</Menu.Item>
                            </SubMenu>
                        </Menu>
                    </Sider>
                    <Layout style={{ padding: '16px' }}>
                        <Content
                            style={{
                                background: '#fff',
                                margin: 0
                            }}
                        >
                            {this.props.children}
                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        )
    }
}
export default Frame